<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scale">
    <title>工具提示插件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        a:focus{
            outline: none;
        }
    </style>
</head>
<body style="margin:200px;">
<!--
<a href=""
   data-toggle="tooltip"
   data-animation="false"
    data-html="true"
   data-original-title="<b>超文本标识符</b>"
   title="123"
   data-placement="auto top"
   data-trigger="hover focus"
   data-delay="100"
   data-template=""
        >html5</a>-->
<!--<div id="selection">-->
    <!--<a href="" rel="tooltip" data-toggle="tooltip" title="超文本标识符">html5</a>-->
    <!--<a href="" data-toggle="tooltip" title="超文本标识符">html5</a>-->
<!--</div>-->

<!--
<div class="btn-group">
    <button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">左</button>
    <button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">中</button>
    <button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">右</button>
</div>
-->

<a href="" data-toggle="tooltip" title="超文本标识符">html5</a>
<button class="btn btn-default">按钮</button>

<script>

    $('a').tooltip({
        trigger:'click'
    });
    $('button').on('click',function(){
        //$('a').tooltip('show');
       // $('a').tooltip('hide');
       // $('a').tooltip('toggle');
        //$('a').tooltip('destroy');
    });

    $('a').on('show.bs.tooltip',function(){
        alert('显示前触发');
    });

    /*
    $('button').tooltip({
        delay: {
            show: 500,
            hide: 100
        },
        container:'body'
    });
    */
    /*$('a').tooltip({
     delay:{
     show:500,
     hide:100
     },
     //placement:'left'
     });*/

    $('#selection').tooltip({
        selector:'a[rel=tooltip]'
    });
</script>
</body>

</html>